import Taro, { Component } from '@tarojs/taro'
import PropTypes from 'prop-types'
import { View, Text } from '@tarojs/components'

import './index.scss'

class RowTip extends Component {

	static propTypes = {
		text: PropTypes.string,
		extra: PropTypes.string,
		width: PropTypes.oneOfType([
			PropTypes.string,
			PropTypes.number
		]),
		size: PropTypes.oneOfType([
			PropTypes.string,
			PropTypes.number
		]),
		active: PropTypes.bool,
		disabled: PropTypes.bool,
		type: PropTypes.string, 			// default small
		cls: PropTypes.string,					
		onClick: PropTypes.func,
	}

	static defaultProps = {
		text: '普货',
		extra: '',
		width: 80,
		type: 'default',
		active: false,
		disabled: false,
		size: 14,
		cls: '',
	}
	render(){
		const { type, text, extra, active, width, size, cls } = this.props
		if(type === 'small'){
			return (<View
				className={`selector-item ${active ? 'selected' : ''}`}
				onClick={this.handleClickTag}
			>
				<Text className="name">{text}</Text>
			</View>)
		}else{
			return (<View 
				className={`g-tag-item ${active? 'g-tag-active' :''} ${cls || ''}`} 
				style={{fontSize: size, minWidth: width }} 
				onClick={this.handleClickTag}
			>
				{text}
				{extra && <Text>（{extra}）</Text>}
			</View>)
		}
	}

	handleClickTag = () => {
		const { onClick, disabled } = this.props
		if(!disabled){
			onClick && onClick()
		}
	}
}

export default RowTip